<template>
  <el-container>
    <div id="particles"></div>
    <el-header>
      <div class="head">
        <el-upload
          class="upload-demo"
          ref="upload"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-change="handleChange"
          :show-file-list="false"
          :file-list="fileArray"
          :auto-upload="false"
        >
          <el-button
            slot="trigger"
            type="warning"
            class="mybutton"
            style="background-color: #666699; border-color: #efeeee"
          >
            导入边界
          </el-button>
        </el-upload>

        <el-button
          type="warning"
          class="mybutton"
          @click="show_configertion = !show_configertion"
          style="background-color: #666699; border-color: #efeeee"
        >
          参数配置
        </el-button>
        <el-button
          type="warning"
          class="mybutton"
          @click="meshGeneration"
          style="background-color: #666699; border-color: #efeeee"
        >
          网格生成
        </el-button>
        <el-button
          type="warning"
          class="mybutton"
          @click="meshTransform"
          style="background-color: #666699; border-color: #efeeee"
        >
          网格转换
        </el-button>
        <el-button
          type="warning"
          class="mybutton"
          @click="show_tools = !show_tools"
          style="background-color: #666699; border-color: #efeeee"
        >
          工具箱
        </el-button>

        <el-button
          type="warning"
          class="mybutton"
          @click="clearScreen"
          style="background-color: #666699; border-color: #efeeee"
          >清屏</el-button
        >
        <el-button
          type="warning"
          class="mybutton"
          style="background-color: #666699; border-color: #efeeee"
          >下载</el-button
        >
      </div>
    </el-header>
    <el-container>
      <el-aside style="text-align: -webkit-right">
        <div class="meshConfiger" v-show="show_configertion">
          <span class="title" onselectstart="return false;">
            Configuration
          </span>
          <el-divider></el-divider>
          <el-form
            :model="mesh"
            size="medium "
            style="width: 200px; margin-top: 10px"
          >
            <el-form-item
              label="密度"
              prop="distance"
              :rules="[
                { required: false, message: '密度不能为空' },
                { type: 'number', message: '密度必须为数字值' },
              ]"
            >
              <el-input
                type="number"
                v-model.number="mesh.distance"
                autocomplete="off"
                style="width: 160px"
              ></el-input>
            </el-form-item>

            <el-form-item label="算法">
              <el-select v-model="mesh.value" style="width: 160px">
                <el-option
                  v-for="item in mesh.algo"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                  :disabled="item.disabled"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('mesh')">
                提交
              </el-button>
              <el-button @click="meshLocated">网格定位</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-aside>
      <el-main>
        <canvas
          id="canvas"
          width="1200px"
          height="600px"
          class="canvas"
          ref="canvas"
          @mousemove="mouseMove"
          @mouseup="mouseUp"
          @dblclick="mousedbClick"
          @mousedown="mouseDown"
        ></canvas>
      </el-main>
      <el-aside>
        <!-- 整个大盒子 -->
        <div class="container" v-show="show_tools">
          <span class="title" onselectstart="return false;"> Tools</span>

          <el-divider></el-divider>
          <!-- 每个图标的小盒子 -->
          <div class="box" @click="handleDrawType('L')">
            <!-- 放图片的小盒子 -->
            <div class="img">
              <!-- 图标 -->
              <img src="../assets/icon/线.png" alt="" />
            </div>
          </div>

          <div class="box" @click="handleDrawType('S')">
            <div class="img">
              <img src="../assets/icon/tx-正方形.png" alt="" />
            </div>
          </div>

          <div class="box" @click="handleDrawType('P')">
            <div class="img">
              <img src="../assets/icon/draw-polygon.png" alt="" />
            </div>
          </div>

          <div class="box" @click="handleDrawType('C')">
            <div class="img">
              <img src="../assets/icon/圆.png" alt="" />
            </div>
          </div>

          <el-divider></el-divider>

          <div class="box" @click="roaming">
            <div class="img">
              <img src="../assets/icon/手.png" alt="" />
            </div>
          </div>

          <div class="box">
            <div class="img">
              <img src="../assets/icon/选择.png" alt="" />
            </div>
          </div>

          <div class="box" @click="expand">
            <div class="img">
              <img src="../assets/icon/放大缩小_X.png" alt="" />
            </div>
          </div>

          <div class="box" @click="narrow">
            <div class="img">
              <img src="../assets/icon/放大缩小_Y.png" alt="" />
            </div>
          </div>

          <div class="box" @click="reSet">
            <div class="img">
              <img src="../assets/icon/全图.png" alt="" />
            </div>
          </div>

          <div class="box">
            <div class="img" @click="colorPicker">
              <img
                src="../assets/icon/颜色选择器.png"
                alt=""
                style="
                  pointer-events: none;
                  z-index: 2;
                  background-color: #efeeee;
                "
              />
              <el-color-picker
                size="mini"
                v-model="mesh.color"
                style="position: absolute; z-index: 1"
              ></el-color-picker>
            </div>
          </div>

          <div class="box" @click="show_distanceBar = !show_distanceBar">
            <div class="img">
              <img src="../assets/icon/笔粗细.png" alt="" />
              <el-slider
                style="position: absolute; left: 160px; bottom: 5px"
                v-model="mesh.distance"
                vertical
                height="200px"
                v-show="show_distanceBar"
              >
              </el-slider>
            </div>
          </div>
          <div class="box" @click="test">
            <div class="img">
              <img src="../assets/icon/橡皮.png" alt="" />
            </div>
          </div>
        </div>
      </el-aside>
    </el-container>
  </el-container>
</template>
<script>
// import swal from "sweetalert";
export default {
  data() {
    return {
      fileArray: [],
      // 绘制类型 线：L,多边形：P,圆：C
      geometryType: "",
      // 是否开始绘制
      blDraw: false,
      // 存储已绘制图形
      geometries: [],
      // 存储绘制过程中的点
      currentPoints: [],
      ctx: "",
      canvas: "",
      canvasHeight: "",
      canvasWidth: "",
      EPSILON: 1.0 / 1048576.0,
      algoTag: "0",
      transTag: "-1",
      // 网格生成密度
      distance: 3,
      // 返回的网格生成数据
      returnData: "",
      // 网格生成算法
      gmshAlgo: "",
      // 漫游变量
      roamingTag: false,
      roamStart: [],
      // 漫游参数[X方向位移, Y方向位移, X缩放系数, Y缩放系数]
      roamPar: [0, 0, 1, 1],
      testGeo: [100, 100, 200, 200],
      // 是否显示工具箱
      show_tools: true,
      show_configertion: true,
      show_distanceBar: false,
      mesh: {
        distance: 40,
        algo: [
          { value: 0, name: "Delaunay" },
          { value: 1, name: "MeshAdapt" },
          { value: 2, name: "Automatic" },
          { value: 3, name: "Frontal-Delaunay" },
          { value: 5, name: "Initial Mesh Only" },
          { value: 6, name: "Delaunay for Quads" },
          { value: 7, name: "Packing of Parallelograms" },
          { value: 8, name: "Quadrangle" },
          { value: 9, name: "Voronoi" },
          { value: 10, name: "Hexagon" },
          { value: 11, name: "Square" },
        ],
        value: "",
        color: "#121f72",
      },
      bacGrid: [],
    };
  },
  methods: {
    getdem() {
      var _this = this;
      let path = "http:localhost:8181/getDemInfor";
      axios.post(path).then(function (resp) {
        console.log(resp.data);

        let mesh = resp.data.node;
        let minX, maxX, minY, maxY, minZ, maxZ;
        let range = resp.data.range;

        minX = range[0];
        maxX = range[1];

        minY = range[2];
        maxY = range[3];

        minZ = range[4];
        maxZ = range[5];

        let cellLength = (maxX - minX) / resp.data.xsize;
        // 渲染
        //  渲染前清空画布
        _this.ctx.clearRect(0, 0, _this.canvasWidth, _this.canvasHeight);
        mesh.forEach((element) => {
          _this.ctx.beginPath();
          if (filltag) {
            // _this.ctx.fillStyle = "RGB(" + (element.Z - minZ) * (255 / (maxZ - minZ)) + "," + (element.Z -
            //   minZ) * (255 / (maxZ - minZ)) + "," + (element.Z - minZ) * (255 / (maxZ - minZ)) + ")";

            if (element[2] >= 33 && element[2] < 221) {
              _this.ctx.fillStyle = "RGB(255, 0, 255)";
            } else if (element[2] >= 221 && element[2] < 409) {
              _this.ctx.fillStyle = "RGB(0, 0, 255)";
            } else if (element[2] >= 409 && element[2] < 602) {
              _this.ctx.fillStyle = "RGB(0, 255, 255)";
            } else if (element[2] >= 602 && element[2] < 790) {
              _this.ctx.fillStyle = "RGB(0, 255, 0)";
            } else if (element[2] >= 790 && element[2] < 983) {
              _this.ctx.fillStyle = "RGB(255, 255, 0)";
            } else if (element[2] >= 983 && element[2] < 1171) {
              _this.ctx.fillStyle = "RGB(255, 128, 0)";
            } else if (element[2] >= 1171 && element[2] <= 2067) {
              _this.ctx.fillStyle = "RGB(128, 0, 0)";
            }
          }

          let x0 =
            (element[0] - cellLength / 2 - minX) *
              ((1200 - 100) / (maxX - minX)) +
            50;
          let y0 =
            (element[1] - cellLength / 2 - minY) *
              ((500 - 100) / (maxY - minY)) +
            50;

          let x1 =
            (element[0] + cellLength / 2 - minX) *
              ((1200 - 100) / (maxX - minX)) +
            50;
          let y1 =
            (element[1] - cellLength / 2 - minY) *
              ((500 - 100) / (maxY - minY)) +
            50;

          let x2 =
            (element[0] + cellLength / 2 - minX) *
              ((1200 - 100) / (maxX - minX)) +
            50;
          let y2 =
            (element[1] + cellLength / 2 - minY) *
              ((500 - 100) / (maxY - minY)) +
            50;

          let x3 =
            (element[0] - cellLength / 2 - minX) *
              ((1200 - 100) / (maxX - minX)) +
            50;
          let y3 =
            (element[1] + cellLength / 2 - minY) *
              ((500 - 100) / (maxY - minY)) +
            50;

          _this.ctx.moveTo(x0, y0);
          _this.ctx.lineTo(x1, y1);
          _this.ctx.lineTo(x2, y2);
          _this.ctx.lineTo(x3, y3);

          _this.ctx.closePath();
          if (filltag) {
            _this.ctx.fill();
          } else {
            _this.ctx.stroke();
          }
        });
      });
    },
    getLinePar(x1, y1, x2, y2) {
      var a, b, c;
      // aX + bY + c = 0
      // 1.平行于Y轴
      if (x1 == x2) {
        a = 1;
        b = 0;
        c = -x1;
        return [a, b, c];
      }
      // 2.平行于X轴
      if (y1 == y2) {
        a = 0;
        b = 1;
        c = -y1;
        return [a, b, c];
      }
      // 3.不平行于X、Y轴
      a = y1 - y2;
      b = x2 - x1;
      c = (y2 - y1) * x1 - (x2 - x1) * y1;
      return [a, b, c];
    },
    reSet() {
      this.ctx.clearRect(
        -this.roamPar[0] / this.roamPar[2],
        -this.roamPar[1] / this.roamPar[3],
        this.canvasWidth / this.roamPar[2],
        this.canvasHeight / this.roamPar[3]
      );
      this.ctx.transform(1 / this.roamPar[2], 0, 0, 1 / this.roamPar[3], 0, 0);
      this.ctx.transform(1, 0, 0, 1, -this.roamPar[0], -this.roamPar[1]);
      this.roamPar[0] = 0;
      this.roamPar[1] = 0;
      this.roamPar[2] = 1;
      this.roamPar[3] = 1;
      this.renderData();
      this.renderGeometries();
    },
    colorPicker() {
      console.log(this.mesh.color);
    },
    submitForm(formName) {
      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
      this.meshGeneration();
    },
    meshLocated() {
      console.log("Find Triangle");
      var points = this.geometries[0].coordinates;

      var minX = Infinity;
      var maxX = -Infinity;
      var minY = Infinity;
      var maxY = -Infinity;
      var meshCell = new Path2D();

      var edges = [
        [points[0][0], points[0][1], points[1][0], points[1][1]],
        [points[1][0], points[1][1], points[2][0], points[2][1]],
        [points[2][0], points[2][1], points[0][0], points[0][1]],
      ];

      points.forEach((element, index) => {
        if (element[0] < minX) {
          minX = element[0];
        }
        if (element[1] < minY) {
          minY = element[1];
        }
        if (element[0] > maxX) {
          maxX = element[0];
        }
        if (element[1] > maxY) {
          maxY = element[1];
        }

        if (index == 0) {
          meshCell.moveTo(element[0], element[1]);
        }
        meshCell.lineTo(element[0], element[1]);
      });
      meshCell.closePath();

      var startPoint = [
        Math.floor(minX / this.mesh.distance),
        Math.floor(minY / this.mesh.distance),
      ];
      var endPoint = [
        Math.ceil(maxX / this.mesh.distance),
        Math.ceil(maxY / this.mesh.distance),
      ];

      this.ctx.beginPath();
      this.ctx.strokeStyle = "Red";
      this.ctx.lineWidth = 4;
      for (let i = startPoint[1]; i < endPoint[1]; i++) {
        for (let j = startPoint[0]; j < endPoint[0]; j++) {
          let points1 = [
            [j * this.mesh.distance, i * this.mesh.distance],
            [(j + 1) * this.mesh.distance, i * this.mesh.distance],
            [(j + 1) * this.mesh.distance, (i + 1) * this.mesh.distance],
            [j * this.mesh.distance, (i + 1) * this.mesh.distance],
          ];
          for (let k = 0; k < points1.length; k++) {
            // 网格单元点在背景网格内
            if (
              this.ctx.isPointInPath(meshCell, points1[k][0], points1[k][1])
            ) {
              this.ctx.moveTo(points1[0][0], points1[0][1]);
              this.ctx.lineTo(points1[1][0], points1[1][1]);
              this.ctx.lineTo(points1[2][0], points1[2][1]);
              this.ctx.lineTo(points1[3][0], points1[3][1]);
              this.ctx.closePath();
              break;
            }
          }
        }
      }

      // this.ctx.moveTo(
      //   Math.floor(minX / this.mesh.distance) * this.mesh.distance,
      //   Math.floor(minY / this.mesh.distance) * this.mesh.distance
      // );
      // this.ctx.lineTo(
      //   Math.ceil(maxX / this.mesh.distance) * this.mesh.distance,
      //   Math.floor(minY / this.mesh.distance) * this.mesh.distance
      // );
      // this.ctx.lineTo(
      //   Math.ceil(maxX / this.mesh.distance) * this.mesh.distance,
      //   Math.ceil(maxY / this.mesh.distance) * this.mesh.distance
      // );
      // this.ctx.lineTo(
      //   Math.floor(minX / this.mesh.distance) * this.mesh.distance,
      //   Math.ceil(maxY / this.mesh.distance) * this.mesh.distance
      // );
      // this.ctx.closePath();
      this.ctx.stroke();
      this.ctx.lineWidth = 1;
    },
    expand() {
      this.ctx.clearRect(
        -this.roamPar[0] / this.roamPar[2],
        -this.roamPar[1] / this.roamPar[3],
        this.canvasWidth / this.roamPar[2],
        this.canvasHeight / this.roamPar[3]
      );
      this.ctx.transform(1.5, 0, 0, 1.5, 0, 0);
      this.roamPar[2] = this.roamPar[2] * 1.5;
      this.roamPar[3] = this.roamPar[3] * 1.5;

      // 图形渲染
      this.ctx.beginPath();
      this.ctx.strokeStyle = "red";
      this.ctx.moveTo(0, 0);
      this.ctx.lineTo(0, 500);
      this.ctx.moveTo(0, 0);
      this.ctx.lineTo(500, 0);
      this.ctx.stroke();

      this.renderData();
      this.renderGeometries();
    },
    narrow() {
      this.ctx.clearRect(
        -this.roamPar[0] / this.roamPar[2],
        -this.roamPar[1] / this.roamPar[3],
        this.canvasWidth / this.roamPar[2],
        this.canvasHeight / this.roamPar[3]
      );

      this.ctx.transform(0.8, 0, 0, 0.8, 0, 0);
      this.roamPar[2] = this.roamPar[2] * 0.8;
      this.roamPar[3] = this.roamPar[3] * 0.8;

      this.renderData();
      this.renderGeometries();
    },
    renderGeometries() {
      if (this.geometries.length < 0) {
        return null;
      }

      for (let i = 0; i < this.geometries.length; i++) {
        let geoType = this.geometries[i].type;
        let geoCoor = this.geometries[i].coordinates;

        let dotPath = new Path2D();
        this.ctx.beginPath();
        this.ctx.strokeStyle = this.geometries[i].color;
        switch (geoType) {
          case "P":
            for (let j = 0; j < geoCoor.length; j++) {
              let element2 = geoCoor[j];
              if (j == 0) {
                this.ctx.moveTo(element2[0], element2[1]);
              } else {
                this.ctx.lineTo(element2[0], element2[1]);
              }
              dotPath.moveTo(element2[0], element2[1]);
              dotPath.arc(element2[0], element2[1], 3, 0, 2 * Math.PI);
            }
            this.ctx.closePath();
            break;
          default:
            break;
        }
        this.ctx.stroke();
        this.ctx.beginPath();

        this.ctx.fillStyle = "RGB(255, 255, 255)";
        this.ctx.strokeStyle = "RGB(15, 28, 112)";
        this.ctx.stroke(dotPath);
        this.ctx.fill(dotPath);
      }
    },
    renderData() {
      if (this.returnData == "") {
        return null;
      }

      this.ctx.strokeStyle = "Black";
      let element = this.returnData.element;

      element.forEach((element) => {
        this.ctx.beginPath();
        this.ctx.moveTo(element.X[0], element.Y[0]);
        for (let index = 1; index < element.X.length; index++) {
          this.ctx.lineTo(element.X[index], element.Y[index]);
        }
        this.ctx.closePath();
        this.ctx.stroke();
      });
    },
    roaming() {
      this.roamingTag = true;
    },
    test() {
      // var _this = this;
      // axios.post("http://localhost:8181/tesInter").then(function (resp) {
      //   console.log("DEM信息！");
      //   _this.returnData = resp.data;
      //   console.log(resp.data);
      //   _this.ctx.transform(1 / 1000, 0, 0, 1 / 1000, 0, 0);
      //   _this.renderDEM();
      // });
      // 图形渲染
      this.ctx.beginPath();
      this.ctx.strokeStyle = "red";
      this.ctx.moveTo(0, 0);
      this.ctx.lineTo(0, 500);
      this.ctx.moveTo(0, 0);
      this.ctx.lineTo(500, 0);

      // 位移
      this.ctx.transform(1, 0, 0, 1, 10, 10);
      this.ctx.stroke();

      this.ctx.beginPath();
      this.ctx.strokeStyle = "green";
      this.ctx.transform(2, 0, 0, 2, 0, 0);
      this.ctx.moveTo(0, 0);
      this.ctx.lineTo(0, 500);
      this.ctx.moveTo(0, 0);
      this.ctx.lineTo(500, 0);

      // 位移

      this.ctx.stroke();
    },
    handleChange(event) {
      console.log(file, fileList);
      console.log(this.fileArray);
    },
    parSetting() {
      swal({
        title: "操作确认",
        text: "删除后，您将无法恢复此虚拟文件！",
        icon: "warning",
        buttons: true,
        dangerMode: true,
      }).then((willDelete) => {
        if (willDelete) {
          swal("噗！您的虚拟文件已被删除！", {
            icon: "success",
          });
        } else {
          swal("你的虚拟文件是安全的！");
        }
      });
    },
    openMesh() {
      var _this = this;
      axios.post("http://localhost:8181/getDemInfor").then(function (resp) {
        console.log("DEM信息！");
        _this.returnData = resp.data;
        console.log(resp.data);

        let node = resp.data.node;

        // DEM范围
        let demRange = resp.data.range;
        // 栅格数据长宽
        let rasterXLength = node[node.length - 1][0] - node[0][0];
        let rasterYLength = node[node.length - 1][1] - node[0][1];

        let xSize = resp.data.xsize;
        let ySize = resp.data.ysize;
        // 适配屏幕的点坐标
        let x1, y1, x2, y2, x3, y3, x4, y4;

        // DEM渲染
        // 根据高程分4段段着色
        var colorvalue1 = demRange[4] + (demRange[5] - demRange[4]) / 4;
        var colorvalue2 = demRange[4] + (demRange[5] - demRange[4]) / 2;
        var colorvalue3 = demRange[4] + ((demRange[5] - demRange[4]) * 3) / 4;
        var colorvalue4 = demRange[5];

        for (let i = 0; i < ySize - 1; i++) {
          for (let j = 0; j < xSize - 1; j++) {
            // 栅格单元坐标转化（适应屏幕）渲染
            x1 =
              (node[i * xSize + j][0] - node[0][0]) *
                ((1200 - 100) / rasterXLength) +
              50;
            y1 =
              (node[i * xSize + j][1] - node[0][1]) *
                ((500 - 100) / rasterYLength) +
              50;

            x2 =
              (node[i * xSize + j + 1][0] - node[0][0]) *
                ((1200 - 100) / rasterXLength) +
              50;
            y2 =
              (node[i * xSize + j + 1][1] - node[0][1]) *
                ((500 - 100) / rasterYLength) +
              50;

            x3 =
              (node[(i + 1) * xSize + j + 1][0] - node[0][0]) *
                ((1200 - 100) / rasterXLength) +
              50;
            y3 =
              (node[(i + 1) * xSize + j + 1][1] - node[0][1]) *
                ((500 - 100) / rasterYLength) +
              50;

            x4 =
              (node[(i + 1) * xSize + j][0] - node[0][0]) *
                ((1200 - 100) / rasterXLength) +
              50;
            y4 =
              (node[(i + 1) * xSize + j][1] - node[0][1]) *
                ((500 - 100) / rasterYLength) +
              50;

            _this.ctx.beginPath();

            // _this.ctx.fillStyle = "RGB(" + (node[i * xSize + j][2] - demRange[4]) * (255 / (demRange[5] -
            //     demRange[4])) +
            //   "," + (node[i * xSize + j][2] - demRange[4]) * (255 / (demRange[5] - demRange[4])) + "," + (node[i *
            //     xSize + j][2] - demRange[4]) * (255 / (demRange[5] - demRange[4])) + ")";

            // if (node[i * xSize + j][2] > demRange[4] && node[i * xSize + j][2] < colorvalue1) {
            //   _this.ctx.fillStyle = 'RGB(25, 82, 25)'
            // } else if (node[i * xSize + j][2] > colorvalue1 && node[i * xSize + j][2] < colorvalue2) {
            //   _this.ctx.fillStyle = 'RGB(13, 17, 255)'
            // } else if (node[i * xSize + j][2] > colorvalue2 && node[i * xSize + j][2] < colorvalue3) {
            //   _this.ctx.fillStyle = 'RGB(51, 255, 0)'
            // } else if (node[i * xSize + j][2] > colorvalue3 && node[i * xSize + j][2] < colorvalue4) {
            //   _this.ctx.fillStyle = 'RGB(128, 6, 0)'
            // }
            if (node[i * xSize + j][2] >= 33 && node[i * xSize + j][2] < 221) {
              _this.ctx.fillStyle = "RGB(255, 0, 255)";
            } else if (
              node[i * xSize + j][2] >= 221 &&
              node[i * xSize + j][2] < 409
            ) {
              _this.ctx.fillStyle = "RGB(0, 0, 255)";
            } else if (
              node[i * xSize + j][2] >= 409 &&
              node[i * xSize + j][2] < 602
            ) {
              _this.ctx.fillStyle = "RGB(0, 255, 255)";
            } else if (
              node[i * xSize + j][2] >= 602 &&
              node[i * xSize + j][2] < 790
            ) {
              _this.ctx.fillStyle = "RGB(0, 255, 0)";
            } else if (
              node[i * xSize + j][2] >= 790 &&
              node[i * xSize + j][2] < 983
            ) {
              _this.ctx.fillStyle = "RGB(255, 255, 0)";
            } else if (
              node[i * xSize + j][2] >= 983 &&
              node[i * xSize + j][2] < 1171
            ) {
              _this.ctx.fillStyle = "RGB(255, 128, 0)";
            } else if (
              node[i * xSize + j][2] >= 1171 &&
              node[i * xSize + j][2] <= 2067
            ) {
              _this.ctx.fillStyle = "RGB(128, 0, 0)";
            }

            _this.ctx.moveTo(x1, y1);
            _this.ctx.lineTo(x2, y2);
            _this.ctx.lineTo(x3, y3);
            _this.ctx.lineTo(x4, y4);
            _this.ctx.closePath();
            _this.ctx.fill();
          }
        }
      });
    },
    meshTransform() {
      // if (this.returnData == "") {
      //   this.$message({
      //     showClose: true,
      //     message: "请先生成网格",
      //     type: "error",
      //   });
      //   return 0;
      // }
      var _this = this;
      switch (this.transTag) {
        case "0":
          // 三角网转四边形网格
          console.log("三角网转四边形网格");

          axios
            .post("http://localhost:8181/triToQuads", this.gmshAlgo)
            .then(function (resp) {
              let tri = resp.data.element;
              _this.returndata = resp.data;
              _this.ctx.strokeStyle = "Black";

              _this.ctx.clearRect(0, 0, _this.canvasWidth, _this.canvasHeight);
              tri.forEach((element) => {
                _this.ctx.beginPath();
                _this.ctx.moveTo(element.X[0], element.Y[0]);
                _this.ctx.lineTo(element.X[1], element.Y[1]);
                _this.ctx.lineTo(element.X[2], element.Y[2]);
                if (element.X.length == 4) {
                  _this.ctx.lineTo(element.X[3], element.Y[3]);
                }
                _this.ctx.closePath();
                _this.ctx.stroke();
              });
            });

          break;
        case "1":
          console.log("四边形网格转三角网");

          let postdata = new Array();
          this.returnData.node.forEach((element) => {
            postdata.push({
              X: element[0],
              Y: element[1],
            });
          });
          axios
            .post("http://localhost:8181/quadsTodelaunay", postdata)
            .then(function (resp) {
              let tri = resp.data.element;

              _this.returnData = resp.data;

              _this.ctx.strokeStyle = "Black";
              console.log("转换后的数据：");
              console.log(_this.returnData);
              tri.forEach((element) => {
                _this.ctx.beginPath();
                _this.ctx.moveTo(element.X[0], element.Y[0]);
                _this.ctx.lineTo(element.X[1], element.Y[1]);
                _this.ctx.lineTo(element.X[2], element.Y[2]);
                if (element.X.length == 4) {
                  _this.ctx.lineTo(element.X[3], element.Y[3]);
                }
                _this.ctx.closePath();
                _this.ctx.stroke();
              });
            });
          break;
        case "2":
          console.log("DEM转六边形");
          this.getMeshTData("http://localhost:8181/demTohexagon", true);
          break;
        case "3":
          // DEM  to Triangle
          console.log("DEM转三角网");
          this.getMeshTData("http://localhost:8181/demToTri", true);

          break;
        case "4":
          // DEM  to Voronoi
          console.log("DEM  to Voronoi");
          this.getMeshTData("http://localhost:8181/demtovoronoi", true);

          break;
        default:
          this.$message({
            showClose: true,
            message: "请选择网格转换算法",
            type: "error",
          });
          break;
      }
    },
    meshGeneration() {
      var _this = this;
      var geometriesborder = new Array();
      if (this.geometries.length <= 0) {
        swal("请绘制边界！", "", "error");
        return 0;
      }
      this.geometries[0].coordinates.forEach((element) => {
        geometriesborder.push({
          X: element[0],
          Y: element[1],
        });
      });

      var postdata_temp = {
        border: geometriesborder,
        distance: this.mesh.distance,
      };
      console.log("请求参数");
      console.log(postdata_temp);

      axios
        .post("http://localhost:8181/tesInter", postdata_temp)
        .then(function (resp) {
          let tri = resp.data.element;
          _this.returnData = resp.data;
          _this.ctx.strokeStyle = "Black";

          console.log("返回数据");
          console.log(_this.returnData);

          tri.forEach((element) => {
            let x = element.X;
            let y = element.Y;
            _this.ctx.beginPath();
            _this.ctx.moveTo(x[0], y[0]);
            for (let index = 1; index < x.length; index++) {
              _this.ctx.lineTo(x[index], y[index]);
            }
            _this.ctx.closePath();
            _this.ctx.stroke();
          });
        });
    },
    getMeshTData(path, filltag) {
      var _this = this;
      axios.get(path).then(function (resp) {
        // console.log(56565656);
        console.log(resp.data);

        let mesh = resp.data.element;
        let minX, maxX, minY, maxY, minZ, maxZ;
        let range = resp.data.range;

        minX = range[0];
        maxX = range[1];

        minY = range[2];
        maxY = range[3];

        minZ = range[4];
        maxZ = range[5];

        // 渲染
        //  渲染前清空画布
        _this.ctx.clearRect(0, 0, _this.canvasWidth, _this.canvasHeight);
        mesh.forEach((element) => {
          _this.ctx.beginPath();
          if (filltag) {
            // _this.ctx.fillStyle = "RGB(" + (element.Z - minZ) * (255 / (maxZ - minZ)) + "," + (element.Z -
            //   minZ) * (255 / (maxZ - minZ)) + "," + (element.Z - minZ) * (255 / (maxZ - minZ)) + ")";

            if (element.Z >= 33 && element.Z < 221) {
              _this.ctx.fillStyle = "RGB(255, 0, 255)";
            } else if (element.Z >= 221 && element.Z < 409) {
              _this.ctx.fillStyle = "RGB(0, 0, 255)";
            } else if (element.Z >= 409 && element.Z < 602) {
              _this.ctx.fillStyle = "RGB(0, 255, 255)";
            } else if (element.Z >= 602 && element.Z < 790) {
              _this.ctx.fillStyle = "RGB(0, 255, 0)";
            } else if (element.Z >= 790 && element.Z < 983) {
              _this.ctx.fillStyle = "RGB(255, 255, 0)";
            } else if (element.Z >= 983 && element.Z < 1171) {
              _this.ctx.fillStyle = "RGB(255, 128, 0)";
            } else if (element.Z >= 1171 && element.Z <= 2067) {
              _this.ctx.fillStyle = "RGB(128, 0, 0)";
            }
          }

          let x0 = (element.X[0] - minX) * ((1200 - 50) / (maxX - minX)) + 25;
          let y0 = (element.Y[0] - minY) * ((600 - 50) / (maxY - minY)) + 25;

          _this.ctx.moveTo(x0, y0);

          for (let i = 1; i < element.X.length; i++) {
            let x = (element.X[i] - minX) * ((1200 - 50) / (maxX - minX)) + 25;
            let y = (element.Y[i] - minY) * ((600 - 50) / (maxY - minY)) + 25;
            _this.ctx.lineTo(x, y);
          }
          _this.ctx.closePath();
          if (filltag) {
            _this.ctx.fill();
          } else {
            _this.ctx.stroke();
          }
        });
      });
    },
    getMeshGData(path) {
      console.log("请求数据");
      var _this = this;
      var geometriesborder = new Array();

      if (this.geometries.length <= 0) {
        swal("请绘制边界！", "", "error");
        return 0;
      }
      this.geometries[0].coordinates.forEach((element) => {
        geometriesborder.push({
          X: element[0],
          Y: element[1],
        });
      });

      var postdata_temp = {
        border: geometriesborder,
        distance: this.distance,
      };
      console.log("请求参数");
      console.log(postdata_temp);

      axios.post(path, postdata_temp).then(function (resp) {
        let tri = resp.data.element;
        _this.returnData = resp.data;
        _this.ctx.strokeStyle = "Black";

        console.log("返回数据");
        console.log(_this.returnData);
        tri.forEach((element) => {
          _this.ctx.beginPath();
          _this.ctx.moveTo(element.X[0], element.Y[0]);
          for (let index = 1; index < element.X.length; index++) {
            _this.ctx.lineTo(element.X[index], element.Y[index]);
          }
          _this.ctx.closePath();
          _this.ctx.stroke();
        });
      });
    },
    testgeneration() {
      console.log("生成");
      var vertices = new Array();
      var borderList = this.geometries[0];
      console.log(borderList);
      var maxX = borderList[0][0];
      var minX = borderList[0][0];
      var minY = borderList[0][1];
      var maxY = borderList[0][1];
      var border = new Path2D();
      for (let i = 0; i < borderList.length; i++) {
        let element = borderList[i];
        if (i == 0) {
          border.moveTo(element[0], element[1]);
        }
        border.lineTo(element[0], element[1]);
        vertices.push(element);
        if (element[0] < minX) {
          minX = element[0];
        }
        if (element[0] > maxX) {
          maxX = element[0];
        }
        if (element[1] < minY) {
          minY = element[1];
        }
        if (element[1] > maxY) {
          maxY = element[1];
        }
      }
      border.closePath();

      var x, y;
      this.ctx.beginPath();
      this.ctx.fillStyle = "Black";
      for (let i = 0; i < 100; i++) {
        do {
          x = Math.random() * (maxX - minX) + minX;
          y = Math.random() * (maxY - minY) + minY;
        } while (!this.ctx.isPointInPath(border, x, y));

        vertices.push([x, y]);
        this.ctx.moveTo(x, y);
        this.ctx.arc(x, y, 2, 0, 2 * Math.PI);
      }

      this.ctx.fill();
      console.log("vertices");
      console.log(vertices);
      var triangles = this.triangulate(vertices);
      console.log("triangles");
      console.log(triangles);
      var i;
      for (i = triangles.length; i; ) {
        this.ctx.beginPath();
        this.ctx.lineWidth = 1;
        --i;
        this.ctx.moveTo(vertices[triangles[i]][0], vertices[triangles[i]][1]);
        --i;
        this.ctx.lineTo(vertices[triangles[i]][0], vertices[triangles[i]][1]);
        --i;
        this.ctx.lineTo(vertices[triangles[i]][0], vertices[triangles[i]][1]);
        this.ctx.closePath();
        this.ctx.stroke();
      }
    },
    handleDrawType(command) {
      switch (command) {
        case "L":
          this.geometryType = "L";
          break;
        case "P":
          this.geometryType = "P";
          break;
        case "C":
          this.geometryType = "C";
          break;
        case "S":
          this.geometryType = "S";
          break;
        default:
          break;
      }
      this.blDraw = true;
    },
    mouseMove(e) {
      // 绘制橡皮线
      let xScreen = e.offsetX;
      let yScreen = e.offsetY;
      let x = (e.offsetX - this.roamPar[0]) / this.roamPar[2];
      let y = (e.offsetY - this.roamPar[1]) / this.roamPar[3];

      if (this.blDraw && this.currentPoints.length > 0) {
        // 1.清空画布
        // 2.绘制当前图形
        this.ctx.clearRect(
          -this.roamPar[0] / this.roamPar[2],
          -this.roamPar[1] / this.roamPar[3],
          this.canvasWidth,
          this.canvasHeight
        );
        let tempPath = new Path2D();
        this.ctx.beginPath();
        // this.ctx.strokeStyle = "RGB(15, 28, 112)";
        this.ctx.strokeStyle = this.mesh.color;
        for (let i = 0; i < this.currentPoints.length; i++) {
          let tempPoint = this.currentPoints[i];
          if (i == 0) {
            this.ctx.moveTo(tempPoint[0], tempPoint[1]);
          } else {
            this.ctx.lineTo(tempPoint[0], tempPoint[1]);
          }
          // 绘制端点样式
          tempPath.moveTo(tempPoint[0], tempPoint[1]);
          tempPath.arc(tempPoint[0], tempPoint[1], 3, 0, 2 * Math.PI);
        }
        this.ctx.lineTo(x, y);
        this.ctx.stroke();

        tempPath.moveTo(x, y);
        tempPath.arc(x, y, 3, 0, 2 * Math.PI);
        // 端点样式填充弄
        this.ctx.beginPath();
        this.ctx.fillStyle = "RGB(255, 255, 255)";
        this.ctx.strokeStyle = "RGB(15, 28, 112)";
        this.ctx.stroke(tempPath);
        this.ctx.fill(tempPath);

        // 渲染图形
        this.renderData();
        this.renderGeometries();
        // this.meshGeneration();
      }

      // 漫游控制
      if (this.roamingTag && this.roamStart.length > 0) {
        let xLength = (xScreen - this.roamStart[0]) / this.roamPar[2];
        let yLength = (yScreen - this.roamStart[1]) / this.roamPar[3];

        this.ctx.clearRect(
          -this.roamPar[0] / this.roamPar[2],
          -this.roamPar[1] / this.roamPar[3],
          this.canvasWidth / this.roamPar[2],
          this.canvasHeight / this.roamPar[3]
        );

        this.ctx.transform(1, 0, 0, 1, xLength, yLength);

        this.roamPar[0] = this.roamPar[0] + xLength * this.roamPar[2];
        this.roamPar[1] = this.roamPar[1] + yLength * this.roamPar[3];
        // 图形渲染
        this.ctx.beginPath();
        this.ctx.strokeStyle = "red";
        this.ctx.moveTo(0, 0);
        this.ctx.lineTo(0, 500);
        this.ctx.moveTo(0, 0);
        this.ctx.lineTo(500, 0);
        this.ctx.stroke();

        // 渲染图形
        this.renderData();
        this.renderGeometries();
        this.roamStart = [e.offsetX, e.offsetY];
        // this.meshGeneration();
      }
    },
    mouseUp(e) {
      this.roamStart = [];
      this.roamingTag = false;
    },
    mouseDown(e) {
      // 开始绘制
      if (this.blDraw) {
        let x = (e.offsetX - this.roamPar[0]) / this.roamPar[2];
        let y = (e.offsetY - this.roamPar[1]) / this.roamPar[3];
        this.currentPoints.push([x, y]);
      }
      // 漫游控制
      if (this.roamingTag) {
        this.roamStart = [e.offsetX, e.offsetY];
      }
      if (this.returnData.length != "") {
        var date1 = new Date();

        var boxindex = this.returnData.boxIndex;
        var startPoint = boxindex.startPoint;
        var xIndex = Math.floor(
          (e.offsetX - startPoint.x) / boxindex.precision
        );
        var yIndex = Math.floor(
          (e.offsetY - startPoint.y) / boxindex.precision
        );

        var index = yIndex * boxindex.XLength + xIndex;

        //绘制背景四边形
        this.ctx.beginPath();
        this.ctx.strokeStyle = "red";
        let squarStart = [
          startPoint.x + boxindex.precision * xIndex,
          startPoint.y + boxindex.precision * yIndex,
        ];
        this.ctx.moveTo(squarStart[0], squarStart[1]);
        this.ctx.lineTo(squarStart[0] + boxindex.precision, squarStart[1]);
        this.ctx.lineTo(
          squarStart[0] + boxindex.precision,
          squarStart[1] + boxindex.precision
        );
        this.ctx.lineTo(squarStart[0], squarStart[1] + boxindex.precision);
        this.ctx.closePath();
        this.ctx.stroke();

        let contain = boxindex.boxes[index];
        var element = this.returnData.element;
        this.ctx.beginPath();
        this.ctx.strokeStyle = "red";
        contain.forEach((elementindex) => {
          let x = element[elementindex].X;
          let y = element[elementindex].Y;
          // this.ctx.beginPath();
          this.ctx.moveTo(x[0], y[0]);
          for (let index = 1; index < x.length; index++) {
            this.ctx.lineTo(x[index], y[index]);
          }
          this.ctx.closePath();
        });
        this.ctx.stroke();

        var date2 = new Date();
        console.log(date2 - date1);
      }
    },
    mousedbClick(e) {
      if (this.blDraw) {
        // 删除双击产生的重复点
        this.currentPoints.pop();

        let startPoint = this.currentPoints[0];
        let endPoint = this.currentPoints[this.currentPoints.length - 1];

        switch (this.geometryType) {
          case "P":
            // 多边形闭合
            this.ctx.beginPath();
            this.ctx.strokeStyle = this.mesh.color;
            this.ctx.moveTo(endPoint[0], endPoint[1]);
            this.ctx.lineTo(startPoint[0], startPoint[1]);
            this.ctx.stroke();

            // 起始端点样式填充
            this.ctx.beginPath();
            let tempPath = new Path2D();
            tempPath.moveTo(startPoint[0], startPoint[1]);
            tempPath.arc(startPoint[0], startPoint[1], 3, 0, 2 * Math.PI);

            tempPath.moveTo(endPoint[0], endPoint[1]);
            tempPath.arc(endPoint[0], endPoint[1], 3, 0, 2 * Math.PI);
            this.ctx.fillStyle = "RGB(255, 255, 255)";
            this.ctx.strokeStyle = "RGB(15, 28, 112)";
            this.ctx.stroke(tempPath);
            this.ctx.fill(tempPath);

            // 复制当前多边形
            var tempgeo = new Array();
            this.currentPoints.forEach((element) => {
              tempgeo.push(element);
            });
            // 存储图形
            this.geometries.push({
              type: "P",
              coordinates: tempgeo,
              color: this.mesh.color,
            });
            break;

          default:
            break;
        }

        // 清空当前图形，停止绘图
        this.currentPoints.length = 0;
        this.blDraw = false;
      }
    },
    clearScreen() {
      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
      // 初始化
      this.geometryType = "";
      this.geometries.length = 0;
      this.blDraw = false;
    },
    drawPoint(x, y) {
      // 绘制端点
      this.ctx.beginPath();
      this.ctx.fillStyle = "RGB(255, 255, 255)";
      this.ctx.strokeStyle = "RGB(15, 28, 112)";
      this.ctx.moveTo(e.offsetX, e.offsetY);
      this.ctx.arc(e.offsetX, e.offsetY, 3, 0, 2 * Math.PI);
      this.ctx.stroke();
      this.ctx.fill();
    },

    // 三角网
    contains(tri, p) {
      /* Bounding box test first, for quick rejections. */
      if (
        (p[0] < tri[0][0] && p[0] < tri[1][0] && p[0] < tri[2][0]) ||
        (p[0] > tri[0][0] && p[0] > tri[1][0] && p[0] > tri[2][0]) ||
        (p[1] < tri[0][1] && p[1] < tri[1][1] && p[1] < tri[2][1]) ||
        (p[1] > tri[0][1] && p[1] > tri[1][1] && p[1] > tri[2][1])
      )
        return null;

      var a = tri[1][0] - tri[0][0],
        b = tri[2][0] - tri[0][0],
        c = tri[1][1] - tri[0][1],
        d = tri[2][1] - tri[0][1],
        i = a * d - b * c;

      /* Degenerate tri. */
      if (i === 0.0) return null;

      var u = (d * (p[0] - tri[0][0]) - b * (p[1] - tri[0][1])) / i,
        v = (a * (p[1] - tri[0][1]) - c * (p[0] - tri[0][0])) / i;

      /* If we're outside the tri, fail. */
      if (u < 0.0 || v < 0.0 || u + v > 1.0) return null;

      return [u, v];
    },
    triangulate(vertices, key) {
      console.log("哈哈哈哈");
      var n = vertices.length,
        i,
        j,
        indices,
        st,
        open,
        closed,
        edges,
        dx,
        dy,
        a,
        b,
        c;

      /* 没有足够的点 */
      if (n < 3) {
        return [];
      }

      /* Slice out the actual vertices from the passed objects. (Duplicate the
       * array even if we don't, though, since we need to make a supertriangle
       * later on!) */

      vertices = vertices.slice(0);

      if (key) {
        for (i = n; i--; ) {
          vertices[i] = vertices[i][key];
        }
      }

      // 建立顶点索引数组，按顶点的x位置排序。如果x位置相等，则通过比较指标进行稳定的排序。
      indices = new Array(n);

      for (i = n; i--; ) {
        indices[i] = i;
      }

      // console.log(indices);
      indices.sort(function (i, j) {
        var diff = vertices[j][0] - vertices[i][0];
        return diff !== 0 ? diff : i - j;
      });
      // console.log(indices);

      // 找到超三角形(包含所有其他三角形)的顶点，并将它们附加到顶点数组的末尾
      st = this.supertriangle(vertices);
      vertices.push(st[0], st[1], st[2]);

      /* Initialize the open list (containing the supertriangle and nothing
       * else) and the closed list (which is empty since we havn't processed
       * any triangles yet). */
      // 初始化开链表(只包含超三角形)和闭链表(因为我们还没有处理任何三角形，所以它是空的)。
      open = [this.circumcircle(vertices, n + 0, n + 1, n + 2)];
      closed = [];
      edges = [];

      /* Incrementally add each vertex to the mesh. */
      //    递增地将每个顶点添加到网格中。
      for (i = indices.length; i--; edges.length = 0) {
        c = indices[i];

        /* For each open triangle, check to see if the current point is
         * inside it's circumcircle. If it is, remove the triangle and add
         * it's edges to an edge list. */
        // 对于每个开三角形，检查当前点是否在它的圆周内。如果是，删除三角形并将它的边添加到边列表中。
        for (j = open.length; j--; ) {
          /* If this point is to the right of this triangle's circumcircle,
           * then this triangle should never get checked again. Remove it
           * from the open list, add it to the closed list, and skip. */
          // 如果这个点在这个三角形的圆的右边，那么这个三角形就不会被检查了。从打开列表中删除它，将其添加到关闭列表中，然后跳过。
          dx = vertices[c][0] - open[j].x;
          if (dx > 0.0 && dx * dx > open[j].r) {
            closed.push(open[j]);
            open.splice(j, 1);
            continue;
          }

          /* If we're outside the circumcircle, skip this triangle. */
          // 如果在圆周外，跳过这个三角形。
          dy = vertices[c][1] - open[j].y;
          if (dx * dx + dy * dy - open[j].r > this.EPSILON) continue;

          /* Remove the triangle and add it's edges to the edge list. */
          // 删除三角形并将它的边添加到边列表中
          edges.push(
            open[j].i,
            open[j].j,
            open[j].j,
            open[j].k,
            open[j].k,
            open[j].i
          );
          open.splice(j, 1);
        }

        /* Remove any doubled edges. */
        this.dedup(edges);

        /* Add a new triangle for each edge. */
        for (j = edges.length; j; ) {
          b = edges[--j];
          a = edges[--j];
          open.push(this.circumcircle(vertices, a, b, c));
        }
      }

      /* Copy any remaining open triangles to the closed list, and then
       * remove any triangles that share a vertex with the supertriangle,
       * building a list of triplets that represent triangles. */
      for (i = open.length; i--; ) {
        closed.push(open[i]);
      }

      open.length = 0;
      // console.log("closed",closed);
      for (i = closed.length; i--; ) {
        if (closed[i].i < n && closed[i].j < n && closed[i].k < n) {
          open.push(closed[i].i, closed[i].j, closed[i].k);
        }
      }

      /* Yay, we're done! */
      return open;
    },
    supertriangle(vertices) {
      var xmin = Number.POSITIVE_INFINITY,
        ymin = Number.POSITIVE_INFINITY,
        xmax = Number.NEGATIVE_INFINITY,
        ymax = Number.NEGATIVE_INFINITY,
        i,
        dx,
        dy,
        dmax,
        xmid,
        ymid;

      for (i = vertices.length; i--; ) {
        if (vertices[i][0] < xmin) xmin = vertices[i][0];
        if (vertices[i][0] > xmax) xmax = vertices[i][0];
        if (vertices[i][1] < ymin) ymin = vertices[i][1];
        if (vertices[i][1] > ymax) ymax = vertices[i][1];
      }

      dx = xmax - xmin;
      dy = ymax - ymin;
      dmax = Math.max(dx, dy);
      xmid = xmin + dx * 0.5;
      ymid = ymin + dy * 0.5;

      return [
        [xmid - 20 * dmax, ymid - dmax],
        [xmid, ymid + 20 * dmax],
        [xmid + 20 * dmax, ymid - dmax],
      ];
    },
    circumcircle(vertices, i, j, k) {
      var x1 = vertices[i][0],
        y1 = vertices[i][1],
        x2 = vertices[j][0],
        y2 = vertices[j][1],
        x3 = vertices[k][0],
        y3 = vertices[k][1],
        fabsy1y2 = Math.abs(y1 - y2),
        fabsy2y3 = Math.abs(y2 - y3),
        xc,
        yc,
        m1,
        m2,
        mx1,
        mx2,
        my1,
        my2,
        dx,
        dy;

      /* Check for coincident points */
      if (fabsy1y2 < this.EPSILON && fabsy2y3 < this.EPSILON)
        throw new Error("Eek! Coincident points!");

      if (fabsy1y2 < this.EPSILON) {
        m2 = -((x3 - x2) / (y3 - y2));
        mx2 = (x2 + x3) / 2.0;
        my2 = (y2 + y3) / 2.0;
        xc = (x2 + x1) / 2.0;
        yc = m2 * (xc - mx2) + my2;
      } else if (fabsy2y3 < this.EPSILON) {
        m1 = -((x2 - x1) / (y2 - y1));
        mx1 = (x1 + x2) / 2.0;
        my1 = (y1 + y2) / 2.0;
        xc = (x3 + x2) / 2.0;
        yc = m1 * (xc - mx1) + my1;
      } else {
        m1 = -((x2 - x1) / (y2 - y1));
        m2 = -((x3 - x2) / (y3 - y2));
        mx1 = (x1 + x2) / 2.0;
        mx2 = (x2 + x3) / 2.0;
        my1 = (y1 + y2) / 2.0;
        my2 = (y2 + y3) / 2.0;
        xc = (m1 * mx1 - m2 * mx2 + my2 - my1) / (m1 - m2);
        yc =
          fabsy1y2 > fabsy2y3 ? m1 * (xc - mx1) + my1 : m2 * (xc - mx2) + my2;
      }

      dx = x2 - xc;
      dy = y2 - yc;
      return {
        i: i,
        j: j,
        k: k,
        x: xc,
        y: yc,
        r: dx * dx + dy * dy,
      };
    },
    dedup(edges) {
      var i, j, a, b, m, n;

      for (j = edges.length; j; ) {
        b = edges[--j];
        a = edges[--j];

        for (i = j; i; ) {
          n = edges[--i];
          m = edges[--i];

          if ((a === m && b === n) || (a === n && b === m)) {
            edges.splice(j, 2);
            edges.splice(i, 2);
            break;
          }
        }
      }
    },
  },
  mounted() {
    //背景
    particlesJS.load("particles", "particles_backup.json", function () {});
    //绘制
    // 1.获取画布
    this.canvas = this.$refs.canvas;
    // 2.获取 绘制工具箱
    this.ctx = this.canvas.getContext("2d");
    this.ctx.lineWidth = 1;
    this.ctx.strokeStyle = "black";

    // 3.获取画布尺寸
    this.canvasHeight = this.ctx.canvas.height;
    this.canvasWidth = this.ctx.canvas.width;

    // 绘制算法类型
    console.log("传递过来的参数");
    this.algoTag = this.$route.query.algotag;

    switch (this.algoTag) {
      case "11":
        this.transTag = "0";
        this.algoTag = "0";
        break;
      case "12":
        this.transTag = "1";
        this.algoTag = "7";
        break;
      case "13":
        this.transTag = "2";
        this.algoTag = "-1";
        break;
      case "14":
        this.transTag = "3";
        this.algoTag = "-1";
        break;
      case "15":
        this.transTag = "4";
        this.algoTag = "-1";
      default:
        break;
    }
    this.transTag = "2";
    // 复制当前多边形
    var tempgeo = new Array();
    tempgeo.push([20, 20]);
    tempgeo.push([1180, 20]);
    tempgeo.push([1180, 580]);
    tempgeo.push([20, 580]);

    // 存储图形
    // this.geometries.push({
    //   type: "P",
    //   coordinates: tempgeo,
    //   color: "#000000",
    // });
    // this.ctx.moveTo(tempgeo[0][0], tempgeo[0][1]);
    // this.ctx.lineTo(tempgeo[1][0], tempgeo[1][1]);
    // this.ctx.lineTo(tempgeo[2][0], tempgeo[2][1]);
    // this.ctx.lineTo(tempgeo[3][0], tempgeo[3][1]);
    // this.ctx.closePath();
    // this.ctx.stroke();
  },
};
</script>
<style lang="less">
.el-color-picker__trigger {
  border: none;
}
.el-input__inner {
  padding-right: 0;
}
.meshConfiger {
  width: 220px;
  height: fit-content;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  background: #efeeee;
  margin-top: 20px;
  border-radius: 16px;

  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;

  text-align: center;
}
.el-divider {
  margin-top: 5px;
  margin-bottom: 5px;
}
.title {
  width: 120px;
  text-align: center;
  margin-top: 10px;
  user-select: none;
  font-weight: bold;
  // font-style: italic;
}
.container {
  width: 140px;
  height: fit-content;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  background: #efeeee;
  margin-top: 20px;
  border-radius: 16px;

  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}
.container .box {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
  align-content: center;
  width: 50px;
  height: 50px;
  margin: 5px;
}
.container .box .img {
  width: 50px;
  height: 50px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1),
    -5px -5px 10px rgba(255, 255, 255, 1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #efeeee;
  transition: box-shadow 0.2s ease-out;
  position: relative;
}

.container .box .img img {
  width: 30px;
  transition: width 0.2s ease-out;
}
.container .box p {
  color: slategrey;
}
.container .box .img:hover {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px rgba(255, 255, 255, 0.8), inset 5px 5px 10px rgba(0, 0, 0, 0.1),
    inset -5px -5px 10px rgba(255, 255, 255, 1);
  transition: box-shadow 0.2s ease-out;
}
.container .box .img:hover img {
  width: 28px;
  transition: width 0.2s ease-out;
}

.particles-js-canvas-el {
  position: absolute;

  left: 0;
  right: 0;
  height: auto;
  min-height: 100%;
  background-image: initial;
  background-size: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  // background-color: rgb(15, 28, 112);
  background-color: #ffffff;
  margin: auto;
}

.canvas {
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  // background-color: rgb(255, 255, 255);
  //   box-shadow: 10px 10px 5px #888888;
  margin: auto;
  background-color: #efeeee;
  box-shadow: 0px 0px 2px #efeeee;
}

.head {
  width: fit-content;
  height: 50px;
  margin: auto;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  padding-left: 10px;
  padding-right: 10px;
  // background-color: white;

  // text-align: center;

  box-shadow: 0px 0px 2px #fffffff8;
}

.el-header {
  text-align: center;
  margin-top: 80px;
  margin-bottom: 10px;
  position: relative;
  // padding-top: 50px;
}

.el-dropdown {
  margin-left: 8px;
  margin-right: 8px;
}

.mybutton {
  margin-top: 2.5px;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 18px;
  // align-self: center;
  // margin: auto;
}

.upload-demo {
  display: inline-block;
}
.el-main {
  text-align: center;
  position: relative;
  width: 1500px;
  // padding-top: 60px;
  //   line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-aside {
  // margin: auto;
  position: relative;
  height: 520px;
}

.icon {
  padding-top: 5px;
  width: 30px;
  height: 30px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>